<template>
  <div class="setting">
    <van-nav-bar left-arrow @click-left="$router.push('/my')">
      <template #title>
        <div class="SettingTitle">
          账号与隐私设置
        </div>
      </template>
      <template #right>
        <div class="saveBtn" v-if="isSave" @click="SaveSet">
          保存
        </div>
      </template>
    </van-nav-bar>
    <div class="f1">
      <van-cell-group>
        <van-field v-model="tel" type="tel" label="手机号" @blur="blur" />
        <van-field v-model="password" type="password" label="修改密码" />
      </van-cell-group>
    </div>
    <div class="marked">开启后，可以让你的好友找到你</div>
    <div class="f1">
      <van-cell-group>
        <van-cell title="允许将我推荐给好友">
          <template #default>
            <van-switch v-model="checked1" size="16px" />
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <div class="marked">开启后，可以向你推荐好友</div>
    <div class="f1">
      <van-cell-group>
        <van-cell title="允许给我推荐可能认识的人">
          <template #default>
            <van-switch v-model="checked2" size="16px" />
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <div class="marked">开启后，分享到微信QQ等平台会展示你的头像</div>
    <div class="f1">
      <van-cell-group>
        <van-cell title="分享页显示我的头像">
          <template #default>
            <van-switch v-model="checked3" size="16px" />
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { Toast } from 'vant'
export default {
  computed: {
    ...mapState(['userInfo'])
  },
  data () {
    return {
      password: '',
      checked1: true,
      checked2: true,
      checked3: true,
      isSave: false,
      tel: ''
    }
  },
  created () {
    this.tel = this.userInfo.mobile
  },
  watch: {
    password: function () {
      this.isSave = true
    },
    checked1: function () {
      this.isSave = true
    },
    checked2: function () {
      this.isSave = true
    },
    checked3: function () {
      this.isSave = true
    }
  },
  methods: {
    blur () {
      this.isSave = true
    },
    SaveSet () {
      Toast.loading({
        message: '保存中...',
        forbidClick: true
      })
      setTimeout(() => {
        Toast.success('提交成功')
        this.$router.push('/my')
      }, 1000)
    }
  }
}
</script>
<style lang="less" scoped>
.setting {
  height: 100vh;
  background-color: #f5f7f9;
  /deep/ .van-nav-bar__content {
    background-color: #3296fa;
    .SettingTitle {
      color: white;
      font-size: 18px;
    }
    .van-nav-bar__arrow {
      color: white;
      font-size: 20px;
    }
    .saveBtn {
      color: white;
    }
  }
  .marked {
    height: 30px;
    width: 100%;
    padding: 0 12px;
    font-size: 13px;
    color: #9c9c9c;
    line-height: 36px;
  }
  .f1 {
    margin-top: 5px;
    position: relative;
    /deep/ .van-switch {
      position: absolute;
      right: 0;
      top: 3px;
    }
    /deep/ .van-cell__title {
      font-size: 14px;
    }
  }
}
</style>
